frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import Box from '@mui/material/Box';
3import {useTranslation} from 'react-i18next';
4import {getSession, useSession} from 'next-auth/react';
5import TravelColumns from '../../../containers/TravelColumns';
6import NewTravelDialog from '../../../containers/NewTravelDialog';
7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
8import Fab from '../../../containers/Fab';
9import pageUtils from '../../../lib/pageUtils';
10import EventLayout, {TabComponent} from '../../../layouts/Event';
11import {
12 EventByUuidDocument,
13 FindUserVehiclesDocument,
14 useFindUserVehiclesQuery,
15} from '../../../generated/graphql';
16
17interface Props {
18 eventUUID: string;
19 announcement?: string;
20}
21
22const Page = (props: PropsWithChildren<Props>) => {
23 return <EventLayout {...props} Tab={TravelsTab} />;
24};
25
26const TravelsTab: TabComponent = () => {
27 const {t} = useTranslation();
28 const session = useSession();
29 const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
30 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
31
32 const isAuthenticated = session.status === 'authenticated';
33 const {data} = useFindUserVehiclesQuery({
34 skip: !isAuthenticated,
35 });
36 const vehicles = data?.me?.profile?.vehicles?.data || [];
37
38 const addTravelClickHandler =
39 isAuthenticated && vehicles?.length != 0
40 ? toggleVehicleChoice
41 : () => toggleNewTravel({opened: true});
42
43 return (
44 <Box>
45 <TravelColumns toggle={addTravelClickHandler} />
46 <Fab
47 onClick={addTravelClickHandler}
48 aria-label="add-car"
49 >
50 {t('travel.creation.title')}
51 </Fab>
52 <NewTravelDialog
53 key={openNewTravelContext.vehicle?.id || 'noVehicle'}
54 context={openNewTravelContext}
55 toggle={() => toggleNewTravel({opened: false})}
56 />
57 <VehicleChoiceDialog
58 open={openVehicleChoice}
59 toggle={toggleVehicleChoice}
60 toggleNewTravel={toggleNewTravel}
61 vehicles={vehicles}
62 />
63 </Box>
64 );
65};
66
67export const getServerSideProps = pageUtils.getServerSideProps(
68 async (context, apolloClient) => {
69 const {uuid} = context.query;
70 const {host = ''} = context.req.headers;
71 const session = await getSession(context);
72 let event = null;
73
74 // Fetch event
75 try {
76 const {data} = await apolloClient.query({
77 query: EventByUuidDocument,
78 variables: {uuid},
79 });
80 event = data?.eventByUUID?.data;
81 } catch (error) {
82 return {
83 notFound: true,
84 };
85 }
86
87 // Fetch user vehicles
88 if (session)
89 await apolloClient.query({
90 query: FindUserVehiclesDocument,
91 });
92
93 return {
94 props: {
95 eventUUID: uuid,
96 metas: {
97 title: event?.attributes?.name || '',
98 url: `https://${host}${context.resolvedUrl}`,
99 },
100 },
101 };
102 }
103);
104
105export default Page;